<template>
  <el-drawer
      title="添加"
      :visible.sync="visible"
      :before-close="handleClose"
      :destroy-on-close="true"
      :wrapperClosable="false"
      :size="this.drawerSize"
  >
    <div class="drawer-content">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="tType">
          <el-select
              v-model="form.tType"
              placeholder="请选择"
              @change="handleTypeTips"
              clearable
              class="select-width"
          >
            <el-option label="首页顶部" value="0"></el-option>
            <el-option label="新闻页顶部" value="1"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="是否显示">
          <el-switch v-model="form.showFlag" @change="handleTips"/>
        </el-form-item>
        <el-form-item label="背景图片" prop="fileId">
          <el-upload
              :action="uploadApi"
              :limit="limit"
              :data="filePicData"
              :file-list="showFilePicList"
              accept="image/*"
              :multiple="false"
              :headers="headers"
              :on-success="handleUpload"
              :on-remove="handleRemove"
          >
            <el-button size="small" v-if="srcList.length === 0" type="primary">上传</el-button>
            <el-button size="small" v-if="srcList.length > 0" type="danger" @click.stop="handleClear">清除</el-button>
          </el-upload>
        </el-form-item>
        <el-image
            v-if="srcList.length > 0"
            style="
            width: 300px;
            height: 169px;
            margin-left: 100px;
            margin-bottom: 24px;
          "
            :src="url"
            :preview-src-list="srcList"
        >
        </el-image>
        <el-alert
            style="margin-bottom: 48px"
            :title="title"
            type="success"
            :closable="false">
        </el-alert>
        <el-form-item>
          <el-button type="primary" @click="handleAdd">确定</el-button>
          <el-button @click="handleClose">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-drawer>
</template>

<script>
import { DRAWER_SIZE_BIG } from "@/util/constant";
import { deleteArticleApi, uploadAttachmentApi } from "@/api/modules/common.api";
import { insertThemeApi } from "@/api/modules/websites/theme.api";

export default {
  data() {
    return {
      visible: false,
      limit: 1,
      uploadApi: uploadAttachmentApi,
      filePicData: {
        objType: 1,
      },
      headers: {
        Authorization: `Bearer ${ localStorage.getItem("token") }`,
      },
      showFilePicList: [],
      form: {
        name: "",
        tType: "0",
        showFlag: false,
        fileId: "",
      },
      url: "",
      title: '建议背景图片尺寸为2560*914，否则会影响展示效果',
      srcList: [],
      attrIdList: [],
      drawerSize: DRAWER_SIZE_BIG,
      rules: {
        name: [{required: true, message: "请输入", trigger: "blur"}],
        tType: [{required: true, message: "请选择", trigger: "blur"}],
        fileId: [{required: true, message: "请选择", trigger: "blur"}],
      },
    };
  },
  methods: {
    init() {
      this.visible = true;
    },
    handleClose() {
      this.visible = false;
    },
    async handleAdd() {
      this.form.fileId = this.attrIdList[0];
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          await insertThemeApi(this.form);
          this.$message({
            message: "成功",
            type: "success",
          });
          this.visible = false;
          this.attrIdList = [];
          this.url = '';
          this.srcList = []
          this.form = {
            name: "",
            tType: "0",
            showFlag: true,
            fileId: "",
          }
          this.showFilePicList = []
          this.$emit("getParentTableData");
        }
      })
      // if (this.form.fileId) {
      //   await insertThemeApi(this.form);
      //   this.$message({
      //     message: "成功",
      //     type: "success",
      //   });
      //   this.visible = false;
      //   this.attrIdList = [];
      //   this.url = '';
      //   this.srcList = []
      //   this.showFilePicList = []
      //   this.$emit("getParentTableData");
      // }else{
      //   this.$message({
      //     message: "请检查参数",
      //     type: "error",
      //   });
      // }
    },
    handleUpload(response, f, fileList) {
      this.attrIdList = [];
      fileList.forEach((item) => {
        if (item.response.errno === 0) {
          this.attrIdList.push(item.response.data.attrId);
        }
      });
      this.srcList = [];
      this.url = fileList[0].response.data.url;
      this.srcList.push(fileList[0].response.data.url);
    },
    handleRemove(file, fileList) {
      this.attrIdList = [];
      fileList.forEach((item) => {
        if (item.response.errno === 0) {
          this.attrIdList.push(item.response.data.attrId);
        }
      });
      this.url = "";
      this.srcList = [];
    },
    async handleClear() {
      await deleteArticleApi({id: this.attrIdList[0]})
      this.attrIdList = [];
      this.url = '';
      this.srcList = []
      this.showFilePicList = []
    },
    handleTips(data) {
      if (data) {
        this.$message({
          message: "此操作会重置其他背景图为隐藏",
          type: "warning",
        });
      }
    },
    handleTypeTips(data) {
      if (data === '0') {
        this.title = '建议背景图片尺寸为2560*914，否则会影响展示效果'
      } else {
        this.title = '建议背景图片尺寸为1920*210，否则会影响展示效果'
      }
    }
  },
};
</script>
<style scoped>
.select-width {
  width: 100%;
}
</style>
